<!--
  Copyright (c) 2018-2999 广州市蓝海创新科技有限公司 All rights reserved.

  https://www.mall4j.com/

  未经允许，不可做商业用途！

  版权所有，侵权必究！
-->

<template>
  <div
    v-cloak
    class="Mall4j discount-list page-special-discount"
  >
    <div
      v-if="discountList.length"
      class="list-con"
    >
      <div
        v-for="(item,index) in discountList"
        :key="item.discountId"
        :class="['item' , item.pcPic ? '' : 'no-bg']"
        @click="toDiscountDetail(item.discountId)"
      >
        <img
          v-if="!item.isPcPicError"
          :src="checkFileUrl(item.pcPic)"
          class="bg"
          alt
        >
        <img
          v-else
          src="@/assets/img/def.png"
          class="bgError"
          alt
        >
        <div class="text-box">
          <div class="time">
            <span class="time-icon" />
            {{ $t('onlyLeft') }}
            <div
              v-if="endTimeList[index].day"
              class="much-time"
            >
              <span class="number">{{ endTimeList[index].day }}</span>{{ $t('day') }}
            </div>
            <!-- 大于一天展示 -->
            <div
              v-if="endTimeList[index].day===0"
              class="number-box"
            >
              <span class="number">{{ endTimeList[index].hour }}</span>
              <span class="colon">:</span>
              <span class="number">{{ endTimeList[index].min }}</span>
              <span class="colon">:</span>
              <span class="number">{{ endTimeList[index].second }}</span>
            </div>
            <!-- 小于一天展示 -->
          </div>
          <div class="logo">
            <img
              :src="checkFileUrl(item.shopLogo)"
              alt
              @error="handlePicError"
            >
          </div>
          <div class="info">
            {{ item.discountName }}
          </div>
        </div>
      </div>
    </div>
    <!-- 页码 -->
    <pagination
      v-model="current"
      :pages="pages"
      @change-page="getDiscountPage"
    />
    <!-- /页码 -->
    <!-- 活动列表为空 -->
    <empty-all-tips
      v-if="isEmpty"
      :text="$t('sorryNoRelatedActivities')"
      :back="$t('backToHome')"
    />
    <!-- 活动列表为空 -->
  </div>
</template>

<script setup>
import defPng from '@/assets/img/def.png'
import { checkFileUrl } from '@/utils/index.js'
const current = ref(1) // 当前页数
onMounted(() => {
  // 设置网页标题
  document.title = $t('commonHead.limitedTimeOffer')
  getDiscountPage(1) // 默认加载第一页
})

let timer = ''
onBeforeMount(() => {
  clearTimeout(timer)
})

const isEmpty = ref(false)
const discountList = ref([]) // 优惠活动列表
const pages = ref(1) // 总页数
const endTimeList = ref([]) // 结束时间
// 获取优惠活动列表
const getDiscountPage = (cur) => {
  isEmpty.value = false
  http.get('/marking/discount/getDiscountList', {
    params: {
      current: cur, // 当前页
      size: 20
    }
  }).then(({ data }) => {
    discountList.value = data.records
    isEmpty.value = !discountList.value.length
    pages.value = data.pages
    const endTimeListPar = []
    discountList.value.forEach(item => {
      endTimeListPar.push({ endTime: item.endTime.toString().replace(/-/g, '/') })
      // 判断图片是否有效
      const pcPicImg = new Image()
      pcPicImg.src = checkFileUrl(item.pcPic)
      pcPicImg.onerror = () => {
        item.isPcPicError = true
      }
    })
    endTimeList.value = endTimeListPar
    countTime()
  })
}

// 倒计时
const countTime = () => {
  const endTimeListPar = endTimeList.value
  let isEnd = false
  endTimeListPar.forEach((item, index) => {
    // 获取当前时间
    const date = new Date()
    const now = date.getTime()

    // 设置截止时间
    const end = new Date(item.endTime).getTime()

    // 时间差
    const leftTime = end - now

    // 定义变量 d,h,m,s保存倒计时的时间
    if (leftTime >= 0) {
      // 天
      item.day = Math.floor(leftTime / 1000 / 60 / 60 / 24)
      // 时
      const h = Math.floor(leftTime / 1000 / 60 / 60 % 24)
      item.hour = h < 10 ? '0' + h : h
      // 分
      const m = Math.floor(leftTime / 1000 / 60 % 60)
      item.min = m < 10 ? '0' + m : m
      // 秒
      const s = Math.floor(leftTime / 1000 % 60)
      item.second = s < 10 ? '0' + s : s
    } else {
      item.day = 0
      item.hour = '00'
      item.min = '00'
      item.second = '00'
    }
    endTimeList.value[index] = item
    if (Number(item.day) === 0 && Number(item.hour) === 0 && Number(item.min) === 0 && Number(item.second) === 0) {
      isEnd = true
    }
  })
  if (isEnd) {
    clearTimeout(timer)
    setTimeout(() => {
      getDiscountPage(1)
    }, 1000)
  } else {
    // 递归每秒调用countTime方法，显示动态时间效果
    timer = setTimeout(countTime, 1000)
  }
}

const router = useRouter()
// 跳转活动详情
const toDiscountDetail = (discountId) => {
  router.push({
    path: '/discount-detail',
    query: {
      discountId
    }
  })
}

/**
 * 加载默认图片
 */
const handlePicError = (e) => {
  e.target.src = defPng
}

</script>

<style lang="scss" scoped>
@use "index";
</style>
